<template>
	<view class="confirm-order bg-active-color">

		<!-- 地址 -->
		<view class="order-map">
			<view class="map-title">
				<view class="map-name">
					收件人:{{user.nickName}}
				</view>
				<view class="">
					手机号码:{{user.phone}}
				</view>
			</view>
			<view class="map-add">
				收货地址:{{user.address}}
			</view>
		</view>

		<!-- 商品 -->


		<view class="goods-content bg-active-color">
			<image class="goods-img" :src="item.goods.avatar" mode=""></image>
			<view class="goods-text">
				<view class="goods-name">
					商品名:{{item.name}}
				</view>
				<view class="goods-name">
					订单编号:{{item.no}}
				</view>
				<view class="goods-size f-color">
					库存:{{item.goods.store}}
				</view>
				<view class="f-active-color">
					订单提交时间:{{item.time}}
				</view>
				<view v-if="item.state == 2" class="f-active-color">
					订单确认时间:{{item.paymentTime}}
				</view>
				<view v-if="item.state == 4" class="f-active-color">
					订单取消时间:{{item.returnTime}}
				</view>
			</view>
			<view class="">
				<view class="">
					￥{{item.goods.price}}
				</view>
				<view class="goods-size">
					x 1
				</view>
			</view>
		</view>


		<!-- 底部:提交订单 -->
		<view class="order-foot">
			<view class="total-price">
				合计: <text class="f-active-color">{{item.total}}</text>
			</view>

			<view v-if="item.state == 1" class="confirm" @click="cancer(item)">
				取消订单
			</view>
			<view v-if="item.state == 1" class="confirm" @click="confirm(item)">
				确定订单
			</view>
			<view v-if="item.state == 2" class="confirm" @click="receive(item)">
				确认收货
			</view>
			<view v-if="item.state == 2" class="confirm" @click="returnOrder(item)">
				退货
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {},
				item: {}
			};
		},
		components: {},
		methods: {
			returnOrder(item) {
				let me = this;
				console.log(item.id)
				// console.log(this.user.id)
				// console.log("that->" + me.user.id)
				uni.request({
					url: me.serverUrl + `/orders/return`, //仅为示例，并非真实接口地址。
					data: {
						orderId: item.id,
					},
					method: "GET",
					success: (res) => {
						console.log(res)
						if (res.data.code == '200') {
							uni.showToast({
								title: '退货成功',
								icon: 'success',
								duration: 2000
							});
						} else {
							uni.showToast({
								title: '系统错误！',
								icon: 'error',
								duration: 2000
							});
						}

						setTimeout(function() {
							uni.reLaunch({
								url: '/pages/order/allorders/allorders'
							})
						}, 2000);
					},
				})

			},
			receive(item) {
				let me = this;
				console.log(item.id)
				// console.log(this.user.id)
				// console.log("that->" + me.user.id)
				uni.request({
					url: me.serverUrl + `/orders/receive`, //仅为示例，并非真实接口地址。
					data: {
						orderId: item.id,
					},
					method: "GET",
					success: (res) => {
						console.log(res)
						if (res.data.code == '200') {
							uni.showToast({
								title: '收货成功',
								icon: 'success',
								duration: 2000
							});
						} else {
							uni.showToast({
								title: '系统错误！',
								icon: 'error',
								duration: 2000
							});
						}

						setTimeout(function() {
							uni.reLaunch({
								url: '/pages/order/allorders/allorders'
							})
						}, 2000);
					},
				})

			},
			confirm(item) {
				// this.user = uni.getStorageSync('user');
				// let that = this
				let me = this;
				console.log(item.id)
				// console.log(this.user.id)
				// console.log("that->" + me.user.id)
				uni.request({
					url: me.serverUrl + `/orders/confirm`, //仅为示例，并非真实接口地址。
					data: {
						orderId: item.id,
						userId: me.user.id,
						goodId: item.goods.id
					},
					method: "GET",
					success: (res) => {
						console.log(res)
						if (res.data.code == '200') {
							uni.showToast({
								title: '订单确定成功',
								icon: 'success',
								duration: 2000
							});
						} else if (res.data.code == '302') {
							// console.log("302302")
							uni.showToast({
								title: '用户积分不足！',
								icon: 'error',
								duration: 2000
							});
						} else if (res.data.code == '301') {
							uni.showToast({
								title: '商品库存不足！',
								icon: 'error',
								duration: 2000
							});
						} else {
							uni.showToast({
								title: '系统错误！',
								icon: 'error',
								duration: 2000
							});
						}

						setTimeout(function() {
							uni.reLaunch({
								url: '/pages/order/allorders/allorders'
							})
						}, 2000);
					},
				})

			},

			cancer(item) {
				let me = this;
				uni.showModal({
					title: '提示',
					content: '您确定要取消订单吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');

							console.log(item.id)
							uni.request({
								url: me.serverUrl + `/orders/return`, //仅为示例，并非真实接口地址。
								data: {
									orderId: item.id
								},
								method: "GET",
								success: (res) => {
									console.log(res)
									if (res.data.code == '200') {
										uni.showToast({
											title: '订单取消成功',
											icon: 'success',
											duration: 2000
										});
									} else {
										uni.showToast({
											title: '取消失败！',
											icon: 'fail',
											duration: 2000
										});
									}
									///提示取消成功
									// this.comList = res.data.records
								}
							})
							setTimeout(function() {
								uni.redirectTo({
									url: '/pages/order/allorders/allorders'
								});
							}, 2000);

						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			getUser() {
				this.user = uni.getStorageSync("user")
			},

		},
		async onLoad(e) {
			await this.getUser()
			this.item = JSON.parse(decodeURIComponent(e.key))

		}
	}
</script>

<style lang="scss">
	.confirm-order {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
	}

	.order-map {
		margin-bottom: 10rpx;
		padding: 20rpx;
		background-color: #fff;
		line-height: 50rpx;
	}

	.map-title {
		display: flex;
		justify-content: space-between;
	}

	.map-name {
		font-weight: bold;
	}

	.goods-list {
		background-color: #fff;
		padding: 10rpx 0;
	}

	.goods-content {
		padding: 10rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.goods-text {
		width: 360rpx;
		padding: 0 10rpx;
		font-size: 26rpx;
	}

	.goods-img {
		width: 160rpx;
		height: 160rpx;
	}

	.goods-size {
		font-size: 24rpx;
	}

	.order-foot {
		width: 100%;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.confirm {
		color: #fff;
		background-color: #49bdfb;
		padding: 10rpx 30rpx;
		margin-right: 10px;
	}

	.total-price {
		padding: 0 20rpx;
	}
</style>